<template>
  <div class="edit-data-center">
    <!--:value="show" 计算属性,这样value点击灰色背景关闭之后,再次触发不了,通过 @on-visible-change="onChange"进行触发 -->
    <BaseModal
      :value="show"
      title="ETL数据维护设置"
      width="600"
      @on-ok="ok"
      @on-cancel="cancel"
      @on-visible-change="onChange"
    >
      <Row class="switch mb-10" align="middle" type="flex">
        <label class="mr-5">传输开关:</label>
        <i-switch v-model="transportStatus"></i-switch>
        <span class="ml-5">{{ onText }}</span>
      </Row>
      <div class="ivu-table-wrapper" v-if="transportStatus">
        <div class="ivu-table ivu-table-default ivu-table-border">
          <div class="ivu-table-header">
            <table class="iv-table" cellspacing="0" cellpadding="0" border="0">
              <thead>
                <tr>
                  <th>
                    <div class="ivu-table-cell">数据表名称</div>
                  </th>
                  <th v-for="head in dicHead" :key="head.id">
                    <div class="ivu-table-cell">
                      <!--返回的this.headSend()方法作为属性值 -->
                      <Checkbox
                        v-model="head.value"
                        @on-change="
                          dealHead($event, head.key, head.disabledKey)
                        "
                        :disabled="head.disabled"
                      >{{ head.name }}</Checkbox>
                      <Tooltip theme="light" :transfer="true">
                        <icon type="md-help-circle" color="#bbb" :size="14" />
                        <!--引入插槽-->
                        <div slot="content" style="white-space: normal;">{{ head.info }}</div>
                      </Tooltip>
                    </div>
                  </th>
                </tr>
              </thead>
            </table>
          </div>
          <div class="ivu-table ivu-table-default ivu-table-border">
            <table class="iv-table" cellspacing="0" cellpadding="0" border="0">
              <tbody class="ivu-table-tbody">
                <tr class="ivu-table-row" v-for="(tr, index) in copyModel" :key="index">
                  <td class="ivu-table-cell">{{ tr.displayName }}</td>
                  <td class="ivu-table-cell">
                    <!--通过jsx函数式组件渲染更改的页面数据 -->
                    <BaseTr :render="renderEtlTransport" :tr="tr"></BaseTr>
                  </td>
                  <td class="ivu-table-cell">
                    <Checkbox v-model="tr.allowEtlModify" :disabled="tr.disabledModify">更新</Checkbox>
                  </td>
                  <td class="ivu-table-cell">
                    <Checkbox v-model="tr.allowEtlPreDelete" :disabled="tr.disabledDelete">删除</Checkbox>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </BaseModal>
    <!--二次弹框确认 -->
    <BaseModal
      v-model="showConfirm"
      title="ETL数据维护设置确认"
      width="400"
      @on-ok="save"
      simple="false"
      type="warning"
      @on-cancel="showConfirm = false"
    >
      <span>将为您按照当前设置，为ETL维护的各数据表赋予相应权限。确认操作吗？</span>
    </BaseModal>
  </div>
</template>
<script lang="tsx">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
import BaseModal from "@components/iv-modal/BaseModal.vue";
import BaseTr from "@components/iv-render/BaseTr.ts";
import _ from "lodash";
@Component({
  components: {
    BaseModal,
    BaseTr
  }
})
export default class EditDataCenter extends Tools {
  @Prop()
  private value!: boolean; // show弹框层
  @Prop()
  private model!: Array<any>; //页面列表传递的数据
  private showConfirm: boolean = false; //二次弹框提示
  private transportStatus: boolean = true; //开启按钮
  private checkHead: boolean = false;
  private list: Array<any> = [];

  /**
   * 计算属性
   */
  private get show() {
    return this.value;
  }

  private get copyModel() {
    return (this.list = _.cloneDeep(this.model));
  }

  private get onText() {
    return this.transportStatus ? "开启" : "关闭";
  }

  private get headSend() {
    return this.checkEvery("allowEtlTransport");
  }

  private get headUpdate() {
    return this.checkEvery("allowEtlModify");
  }

  private get headDelete() {
    return this.checkEvery("allowEtlPreDelete");
  }

  /**
   * 初始化校验check or uncheck
   */
  private checkEvery(key: string) {
    return this.copyModel.every(item => item[key] === true);
  }

  private get disableHeadSend() {
    return false;
  }

  private get disableHeadUpdate() {
    return this.checkEvery("disabledModify");
  }

  private get disableHeadDelete() {
    return this.checkEvery("disabledDelete");
  }

  /**
   * 处理全选 or 非全选
   */
  private dealHead(check, key, disKey) {
    this.copyModel
      .filter(it => it[disKey] === false)
      .map(item => {
        item[key] = check; //此处每条数据没有及时渲染,咋进行渲染呢? 解决方法: 通过定义一个list变量
      });
  }

  /**
   * jsx函数式渲染页面 params即数据
   */
  private renderEtlTransport(h, params) {
    // console.log(params);
    const { tr } = params; //重写获取最新渲染对象值
    return (
      <checkbox vModel={tr.allowEtlTransport} disabled={tr.disabledTransport}>
        传输
      </checkbox>
    );
  }

  private get dicHead() {
    return [
      {
        key: "allowEtlTransport",
        value: this.headSend,
        name: "允许传输",
        disabled: this.disableHeadSend, //控制表头不可点击
        disabledKey: "disabledTransport", //过滤不可点击的每条数据
        info:
          "选中：允许将ETL文件相应数据解析并入中间库；不选中：仅允许获取ETL文件，不做相应解析"
      },
      {
        key: "allowEtlModify",
        value: this.headUpdate,
        name: "允许更新",
        disabled: this.disableHeadUpdate,
        disabledKey: "disabledModify",
        info:
          "选中：允许将中间库的相应数据更新（包含insert、update、delete）到正式库中，并发出相应数据变化通知；不选中：不允许将中间库的相应数据更新到正式库中。"
      },
      {
        key: "allowEtlPreDelete",
        value: this.headDelete,
        name: "允许删除",
        disabled: this.disableHeadDelete,
        disabledKey: "disabledDelete",
        info:
          "选中：针对更新数据，当其是delete操作时，则进入预删除回收站，等待人工确认删除；不选中：针对更新数据，当其是delete操作时，不需要人工确认，直接删除数据。"
      }
    ];
  }

  /**
   * 点击背景 or 关闭按钮,触发弹框层显示or隐藏
   */
  private onChange(show) {
    if (this.show && !show) {
      console.log(
        "点击背景 or 关闭按钮this.show的值:",
        this.show,
        "--- show的值:",
        show
      ); //输出的结果: this.show的值: true --- show的值: true
      this.$emit("refresh");
    }
  }

  /**
   * 点击取消按钮,触发弹框层显示or隐藏
   */
  private cancel() {
    this.$emit("refresh");
  }

  private ok() {
    this.showConfirm = true;
  }

  /**
   * 保存
   */
  private save() {}

  //第二种方法点击背景 or 关闭 or 取消 按钮,触发弹框层显示or隐藏,需要将:value="show"改成v-model="show"
  // private set show(value) {
  //   //更改父组件
  //   this.$emit("input", value);
  // }
}
</script>
<style lang="stylus" scoped>
>>>.iv-table {
  width: 100%
}
</style>
